<template>
  <!-- 二级路由 坑 -->
  <!-- <RouterView ></RouterView> -->
  <!-- 搜索框 -->

  <div class="nav">
    <p @click="$router.push('/address')">地址</p>
    <van-search v-model="value" shape="round" background="red" placeholder="卡姿兰大眼睛" @click="$router.push('/search')">
    </van-search>
    <p v-if="isShowUser" @click="$router.push('/login')">登录</p>
    <p v-else @click="$router.push('/mine')">我的</p>
  </div>
  <van-grid column-num="5">
    <van-grid-item icon="photo-o" text="京东超市" />
    <van-grid-item icon="photo-o" text="数码电器" />
    <van-grid-item icon="photo-o" text="京东百货" />
    <van-grid-item icon="photo-o" text="京东生鲜" />
    <van-grid-item icon="photo-o" text="京东到家" />
    <van-grid-item icon="photo-o" text="京东超市" />
    <van-grid-item icon="photo-o" text="数码电器" />
    <van-grid-item icon="photo-o" text="京东百货" />
    <van-grid-item icon="photo-o" text="京东生鲜" />
    <van-grid-item icon="photo-o" text="京东到家" />
  </van-grid>

  <div class="jdkill">
    <h4>京东秒杀</h4><span>18:00专场</span>
    <van-count-down :time="time">
      <template #default="timeData">
        <span class="block">{{ timeData.hours }}</span>
        <span class="colon">:</span>
        <span class="block">{{ timeData.minutes }}</span>
        <span class="colon">:</span>
        <span class="block">{{ timeData.seconds }}</span>
      </template>
    </van-count-down>

  </div>

  <div class="kill">
    <ul>
      <li v-for="item in secKillArr" :key="item.proid">
        <img :src="item.img1" alt="">
        <h5>${{ item.originprice }}元</h5>
      </li>
    </ul>
  </div>

  <!-- <div class="pro">
  <ul>
    <li v-for="item in categoryArr" :key="item.proid">
      <img :src="item.img1" alt="">
      <p class="p0">{{ item.proname }}</p>
      <h5>${{ item.originprice }}元</h5>
    </li>
  </ul>
</div> -->

  <div class="pro">
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <van-cell v-for="item in categoryArr1" :key="item.proid">
        <img :src="item.img1" alt="" @click="$router.push({path:'/detail/'+item.proid})">
        <!-- 
          {path:'/detail',query:{proid:item.proid}}

          '/details/' + item.proid
         -->
        <p class="p0">{{ item.proname }}</p>
        <h5>${{ item.originprice }}</h5>
      </van-cell>
    </van-list>

  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import Mine from '@/views/Mine.vue'
import { getBannerData, getCategoryData, getSecKillData } from '@/api/home'
import { showNotify, closeNotify } from 'vant';
import type { cartListItem, secKillItem } from '@/types/homeType'


// 消息提示
showNotify({
  message: '获取商品分页列表数据',
  color: 'white',
  background: '#58be6a',
  duration: 1000,
});
const router=useRouter();
const isShowUser = ref<boolean>(true);

const time = ref(30 * 60 * 60 * 1000);

// 搜索关键字
const value = ref<string>('')
// 分类列表
const categoryArr = ref<Array<cartListItem>>([])

const categoryArr1 = ref<Array<cartListItem>>([])

const loading = ref(false);
const finished = ref(false);
const count1 = ref<number>(1)


// 轮播图
getBannerData().then(res => {
  // console.log('banner', res);
})
const getCategoryFn = () => {
  getCategoryData({
    count: count1.value,
    limitNum: 20
  }).then(res => {
    console.log('产品分类列表', res);
    categoryArr.value = res.data.data
    // concat 连接数组
    // categoryArr1.value.push(categoryArr.value)
    categoryArr.value.forEach(item => {
      categoryArr1.value.push(item)
      // console.log('item',item);
      // console.log('cate111',categoryArr1);

    });
    // 加载状态结束
    loading.value = false;
    count1.value++
    console.log('count1', count1.value);

    // 数据全部加载完成
    if (res.data.data.length == 0) {
      finished.value = true;
    }
  })
  // console.log('999', categoryArr);

}
// 调用产品分类列表接口
getCategoryFn()


// 秒杀数组
const secKillArr = ref<Array<secKillItem>>([])
// 调用秒杀接口
getSecKillData({
  count: 1,
  limitNum: 6
}
).then(res => {
  console.log('秒杀', res);
  secKillArr.value = res.data.data
})


const onLoad = () => {
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  getCategoryFn();

}




</script>
 
<style scoped lang="scss">
.jdkill {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .colon {
    display: inline-block;
    margin: 0 4px;
    color: #1989fa;
  }

  .block {
    display: inline-block;
    width: 22px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: #1989fa;
  }
}

.nav {
  background-color: red;
  display: flex;
  justify-content: space-between;
  color: white;
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;

  p {
    background-color: rgba($color: #f4f2f2, $alpha: 0.1);
    color: white;

  }

  .van-search {
    width: 80%;
  }
}

.kill {
  ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    li {
      width: 16%;
      height: 90px;
      text-align: center;

      img {
        width: 100%;
        height: 100%;
      }

      h5 {
        color: red;
      }
    }
  }
}

.pro {
  margin: 50px 0;

  .van-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 0 5px;

    .van-cell {
      width: 45%;
      text-align: center;

      img {
        width: 100%
      }

      .p0 {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 13px;
      }

      h5 {
        color: red;
        text-align: center;
      }
    }
  }
}
</style>